import React from "react"
import Layout from "../components/layout"
import { Link } from "gatsby"

export default function Home({ data }) {
  console.log(data)
  return (
    <Layout>
      <section>
        {data.allMarkdownRemark.edges.map(({ node }) => (
          <article key={node.id} className="mb-16">
            <img
              className="mb-4"
              src={
                node.frontmatter.test !== null &&
                node.frontmatter.test.publicURL !== null &&
                node.frontmatter.test.publicURL
              }
            />
            <header className="mb-4">
              <h3 className="text-4xl text-gray-900 font-bold duration-700 hover:text-yellow-500 hover:underline leading-normal">
                <Link to={node.fields.slug}>{node.frontmatter.title}</Link>
              </h3>
            </header>
            <div className="mb-4">
              <p className="text-gray-700">{node.excerpt}</p>
            </div>
            <footer className="flex items-center">
              <time className="text-sm text-gray-700 flex items-center mr-5">
                <svg
                  className="h-4 w-4 text-gray-500 mr-1"
                  fill="none"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                {node.frontmatter.date}
              </time>
              {node.frontmatter.tags !== null && (
                <div className="flex items-center mr-4 text-sm">
                  <svg
                    className="h-4 w-4 text-gray-500 mr-1"
                    fill="none"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
                  </svg>
                  {node.frontmatter.tags.map(tag => (
                    <span className="mr-1">{tag}</span>
                  ))}
                </div>
              )}
            </footer>
          </article>
        ))}
      </section>
    </Layout>
  )
}

export const query = graphql`
  query {
    allMarkdownRemark {
      totalCount
      edges {
        node {
          frontmatter {
            title
            date
            tags
            test {
              publicURL
            }
          }
          html
          tableOfContents
          id
          timeToRead
          fields {
            slug
          }
          excerpt
        }
      }
    }
  }
`
